<!-- 工作交流 -->
<template>
  <div class="exchange-list" v-if="isAllLoad">
    <ul v-if="exchangeData.length>0" v-infinite-scroll="loadMore" :infinite-scroll-disabled="moreLoading" infinite-scroll-distance="150">
      <li class="single_exchange" v-for="item in exchangeData" :key="item.articleId" @click="toApp('WorkExchangeAact')">
        <i class="iconfont icon-tianchongxing-"></i>
        <div class="title"><i class="iconfont icon-yuandianxiao circle"></i><span>{{ item.articleTitle }}</span></div>
        <div class="time">时间：{{ item.releaseTime }}</div>
      </li>
      <!--底部判断是加载图标还是提示“全部加载”-->
      <div class="more_loading" v-show="!queryLoading && !noData">
        <mt-spinner type="snake" color="#ccc" :size="20" v-show=" moreLoading && !allLoaded">加载中</mt-spinner>
        <span v-show="allLoaded">已全部加载</span>
      </div>
      <div class="exam_list_box exam_noData" v-if="noData && isAllLoad">
        <i class="iconfont icon-wushuju"></i>
        <span>暂无数据</span>
      </div>
    </ul>
    <div class="nocourse" v-else><i class="iconfont icon-zanwu"></i>
      <p>暂无数据</p>
    </div>
  </div>
</template>
<script>
import verify from '@/assets/js/verificationMixin'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ExchangeList',
  mixins: [verify],
  data() {
    return {
      phone: this.$route.query.phone,
      isAllLoad: false,
      exchangeData: [],
      //下拉加载和 暂时没有的搜索
      pageNum: 0,
      queryLoading: false,
      moreLoading: false,
      allLoaded: false,
      totalNum: 0,
      pageSize: 20,
      noData: false,
    }
  },
  computed: {
    ...mapState(['userPhone']),
  },
  methods: {
    ...mapMutations([
      'toApp'
    ]),
    //下拉加载
    loadMore() {
      if (this.allLoaded) {
        this.moreLoading = true;
        return;
      }
      if (this.queryLoading) {
        return;
      }
      this.moreLoading = !this.queryLoading;
      this.pageNum++;
      this.getExchangeList();
    },
    //获取工作交流
    getExchangeList() {
      let _self = this;
      let uri = 'newsmngajax/articleInfo!queryArticleInfoList2.action';
      _self.$_get(uri, {
          'verifyStatus': '2',
          'articleType': '2',
          'userPhone': _self.phone,
          'page': _self.pageNum,
          'rows': _self.pageSize,
        })
        .then(function(res) {
          _self.isAllLoad = true;
          // _self.exchangeData = data.gridModel;
          if (_self.pageNum == 1) {
            _self.exchangeData = res.gridModel;
          } else {
            _self.exchangeData = _self.exchangeData.concat(res.gridModel);
          }
          if (_self.exchangeData.length >= res.records) {
            _self.moreLoading = !_self.queryLoading;
            _self.allLoaded = true;
          }
          if (_self.pageNum == 1 && _self.exchangeData.length == 0) {
            _self.noData = true;
          }
        })
    },
  },
  mounted() {
    this.$_verifyConfig()
    this.getExchangeList();
    dd.ready(function() {
      dd.biz.navigation.setTitle({
        title: '工作交流', //标题
        onSuccess: function(result) {},
        onFail: function() {}
      });
    })
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.exchange-list {
  height: 100%;
  overflow-y: auto;
  background: #f4f4f4;
  padding-bottom: 80px;

  li.single_exchange {
    width: 100%;
    box-sizing: border-box;
    min-height: 127px;
    background: #fff;
    border: 1px solid #f4f4f4;
    /* no */
    padding-right: 120px;
    padding-top: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    position: relative;
    text-align: left;
    overflow: hidden;

    i.icon-tianchongxing- {
      position: absolute;
      height: 100%;
      /*width:70px;
				height:70px;*/
      text-align: left;
      top: -14px;
      right: 20px;
      line-height: 70px;
      text-align: center;
      color: #0099CC;
      font-size: 48px;
      /* px */
      /*transform: scaleY(1.2);*/
      /*border-radius: 50%;*/
      /*box-shadow: 0 0 10px #ddd;*/
    }

    div.title {
      min-height: 60px;
      line-height: 40px;
      padding: 10px 0;
      font-size: 28px;
      /* px */
      color: #333;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;

      i {
        color: #0099CC;
        margin-right: 10px;
      }
    }

    div.time {
      min-height: 60px;
      line-height: 60px;
      font-size: 28px;
      /* px */
      color: #666;
    }
  }

  .nocourse {
    margin-top: 200px;

    .iconfont {
      font-size: 180px;
      color: #999;
    }

    p {
      color: #999;
      font-size: 22px;
      line-height: 80px;
    }
  }
}

</style>
